<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function checkModify() {
			var f=document.modForm;
			if(f.nick.value==""){
				alert("별명을 입력하세요!");
				f.nick.focus();
				return false;
			}else if(f.password.value==""){
				alert("패스워드를 입력하세요!");
				f.password.focus();
				return false;
			}else if(f.checkPassword.value==""){
				alert("패스워드확인하세요!");
				f.checkPassword.focus();
				return false;
			}else if(f.checkPassword.value!=f.password.value){
				alert("패스워드확인을 다시 해주세요!");
				f.checkPassword.value="";
				f.checkPassword.focus();
				return false;
			} else if(f.nickCheck.value==""){
				alert("중복된 별명입니다!");
				f.nick.focus();
				return false;
			} 
			f.submit();
	}
	var xhr;
	function createXMLHttpRequest(){
		if(window.ActiveXObject){
			xhr=new ActiveXObject("Microsoft.XMLHTTP");
		}else{
			xhr=new XMLHttpRequest();
		}	
		}
	function startRequest(){
		createXMLHttpRequest();
		xhr.onreadystatechange=callback;
		var nick=document.getElementById("nick").value;
		var url="${pageContext.request.contextPath }/member.do?command=nickCheck&nick="+nick;
		xhr.open("GET",url,true);
		xhr.send(null);
	}
	function callback(){
		if(xhr.readyState==4){
			if(xhr.status==200){
				/*  alert("1");  */
				var f=document.modForm;
				var jsonData=eval("("+xhr.responseText+")");
				var mess2=jsonData.mess2;
				var nickName=document.getElementById("nick").value;
				/* alert("1"); */
				document.getElementById("checkNick").innerHTML=" "+nickName+" "+mess2;
				if(mess2=="생성할 수 없는 별명입니다."){
					if(document.getElementById("nick").value=="${sessionScope.vo.nick }"){
						f.nickCheck.value="ok";
					}else{
						f.nickCheck.value="";
					}
				}else{
					f.nickCheck.value="ok";
				}
			}
		}
	}
</script>
</head>
<body>
<form name="modForm" action="${pageContext.request.contextPath }/member.do" method="post">
<input type="hidden" name="command" value="update">
<input type="hidden" name="idFlag" value="">
	<input type="hidden" name="nickCheck" value="ok">
<table width="900" border="0" cellpadding="5px" align="center">
	<!-- 1. 맨 위 공백 지정하기 위한 빈줄 -->
	<tr height="20">
		<td align="center" colspan="2" ></td>
	</tr>
	<!-- 2. 왼쪽 DABANG 버튼 만들기 위한 줄 -->
	<tr>
		<td align="left" colspan="2">
		<a href="../boardlist.do?command=cafe"> <img
						src="${pageContext.request.contextPath }/img/register/dabang.png"></a>
	</tr>
	<!-- 3. 녹색바 넣기 위한 칸 -->
	<tr height="80">
		<td colspan="4" background="${pageContext.request.contextPath }/img/modify/greenbar.png"></td>
	</tr>
	<!-- 4. 기본정보수정 안내문 넣기 위한 줄 -->
	<tr height="230">
		<td width="80%" colspan="4" background="${pageContext.request.contextPath }/img/modify/modify1.PNG"></td>
	</tr>
	<!-- 5. 위 보호선 넣는 줄 -->
	<tr>
		<td colspan="4" align="center" height="20" background="${pageContext.request.contextPath }/img/register/line.PNG"></td>
	</tr>
	<!-- 6. 메인 줄 -->
	<tr><!-- 5 : 회원가입 내용들 -->
				<td width="95"></td>		<!-- 대표 width 길이 지정!! : 1번째 칸 = 여백부분 -->
				<td width="200">		<!-- 대표 width 길이 지정!! : 2번째 칸 = 설명부분 -->
					<table border="0" cellpadding="6" width="200">
						<tr>
							<td><font face="gothic"><b>&nbsp;&nbsp;&nbsp;이름</b></font></td>
						</tr>
						<tr>
							<td><font face="gothic"><b>&nbsp;&nbsp;&nbsp;아이디</b></font></td>
						</tr>
						<tr>
							<td><font face="gothic"><b>&nbsp;&nbsp;&nbsp;별명</b></font></td>
						</tr>
						<tr>
							<td><font face="gothic"><b>&nbsp;&nbsp;&nbsp;비밀번호</b></font></td>
						</tr>
						<tr>
							<td><font face="gothic"><b>&nbsp;&nbsp;&nbsp;비밀번호 확인</b></font></td>
						</tr>
					</table>
				</td>	
				<td width="100">		<!-- 대표 width 길이 지정!! : 3번째 칸 = 입력부분 -->
					<table border="0" cellpadding="4">
						<tr>
							<td>${sessionScope.vo.name}
							<input type="hidden" name="name" id="name" value="${sessionScope.vo.name}">
							</td>
						</tr>
						<tr>
							<td>${sessionScope.vo.id}
							<input type="hidden" name="id" id="id" value="${sessionScope.vo.id}">
							</td>
						</tr>
						<tr>
							<td><input type="text" name="nick" id="nick"
				value="${sessionScope.vo.nick}" onkeyup="startRequest()"></td>
						</tr>
						<tr>
							<td><input type="password" name="password" id="password"
				value="${sessionScope.vo.password}"></td>
						</tr>
						<tr>
							<td><input type="password" name="checkPassword" id="checkPassword"
				value="${sessionScope.vo.password}"></td>
						</tr>
					</table>
				</td>	
				<td>		<!-- 대표 width 길이 지정!! : 4번째 칸 = 중복체크 부분 -->
					<table border="0" cellpadding="4" width="400">
						<tr>
							<td><br></td>
						</tr>
						<tr>
							<td><br></td>
						</tr>
						<tr>
							<td><span id="checkNick"></span></td>
						</tr>
						<tr>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td>&nbsp;</td>
						</tr>
					</table>
				</td>	
			</tr>
			<tr height="20"></tr>
	<!-- 7. 아래 보호선 넣는 줄 -->
	<tr>
		<td colspan="4" align="center" height="20" background="${pageContext.request.contextPath }/img/register/line.PNG"></td>
	</tr>
	<!-- 8. 확인버튼 넣는 줄 -->
	<tr>
		<td align="center" colspan="4"><input type="image" value="회원가입" onclick="return checkModify()" 
					src="${pageContext.request.contextPath }/img/register/confirm_button.png"></td>
	</tr>
	
</table>
</form>
</body>
</html>